import React, { useState } from 'react'
import { connect } from 'react-redux'
import { addTodo } from '@/redux-saga/action'
import { Dispatch } from 'redux'
import { Button, Input, Space } from 'antd'

interface Iprops {
	dispatch: Dispatch
}
// 函数组件
const AddTodo: React.FC<Iprops> = ({ dispatch }) => {
	const [value, setValue] = useState('')
	const add = (event) => {
		event.preventDefault()
		if (!value.trim()) return
		dispatch(addTodo(value)) // 添加
		setValue('')
	}
	return (
		<Space>
			<Input value={value} onChange={(e) => setValue(e.target.value)} />
			<Button type="primary" onClick={add}>
				添加
			</Button>
			<Button type="default" onClick={() => {}}>
				请求
			</Button>
		</Space>
	)
}

// connect 高阶组件 ，将 dispatch 作为 props 注入到 AddTodo
export default connect()(AddTodo)
